<template>
  <view>
    <uni-drawer :visible="rightDrawerVisible" mode="left" @close="closeRightDrawer">
      <view class="choose-data">
        <view class="choose-data-box">
          <view class="choose-data-title">
            <view class="choose-data-title-item cancel" @click="closeRightDrawer">取 消</view>
            <view class="choose-data-title-item confirm" @click="birthConfirm">确 定</view>
          </view>
          <view class="choose-data-main">
            <picker-view style="width: 90%; height: 350rpx;" :value="value" @change="bindChange">
              <picker-view-column>
                <view
                  v-for="(item,index) in years"
                  :key="index"
                  style="line-height: 34px;"
                >{{item}}年</view>
              </picker-view-column>
              <picker-view-column>
                <view
                  v-for="(item,index) in months"
                  :key="index"
                  style="line-height: 34px"
                >{{item}}月</view>
              </picker-view-column>
            </picker-view>
          </view>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>
<script>
import uniDrawer from "../../components/uni-drawer/uni-drawer";
let app = getApp();
export default {
  props: ["startTime", "currentDate"],
  components: {
    uniDrawer
  },
  data() {
    const date = new Date();
    const years = [];
    const year = date.getFullYear();
    const months = [];
    const month = date.getMonth() + 1;
    const startYear = this.startTime.split("-")[0];
    const endyear = date.getFullYear();
    const startMonth = this.startTime.split("-")[1].replace(/\b(0+)/gi, "");
    const endMoth = date.getMonth() + 1;
    const currentDateYear = this.currentDate.split("-")[0];
    const currentDateMoth = this.currentDate
      .split("-")[1]
      .replace(/\b(0+)/gi, "");
    let valueYear = "";
    for (let i = startYear; i <= endyear; i++) {
      years.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i);
    }
    return {
      rightDrawerVisible: false,
      startYear,
      startMonth,
      currentDateYear,
      currentDateMoth,
      years,
      year,
      months,
      month,
      value: [0, 0],
      visible: true
    };
  },
  created() {},
  methods: {
    closeRightDrawer() {
      this.rightDrawerVisible = false;
    },
    showRightDrawer(date) {
      this.rightDrawerVisible = true;
      console.log(date);
      let value=[];
      this.currentDateYear = date.split("-")[0];
      this.currentDateMoth = date.split("-")[1].replace(/\b(0+)/gi, "");
      console.log(this.currentDateYear)
      console.log(this.startYear)
      for (let i = 0;i < this.years.length;i++) {
          console.log(this.years[i] )
        if (this.years[i] == this.currentDateYear) {
            console.log(i)
            console.log(this.currentDateYear)
         value[0] = i;
        }
      }
      value[1] = parseInt(this.currentDateMoth) - 1;
      console.log(value)
      this.value=value
    },
    bindChange(e) {
      const val = e.detail.value;
      this.year = this.years[val[0]];
      this.month = this.months[val[1]];
    },
    birthConfirm(e) {
      let date=''
      if(this.month<10){
         date= this.year + "-" + "0"+this.month
      }else{
         date= this.year + "-" +this.month
      }
      this.$emit("birthConfirm", date);
      this.closeRightDrawer();
    }
  }
};
</script>

<style>
.choose-data {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.choose-data-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90rpx;
  border-bottom: 1rpx solid #efefef;
}

.choose-data-title .choose-data-title-item {
  height: 90rpx;
  width: 150rpx;
  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
}

.choose-data-title .birth-type {
  height: 90rpx;
  line-height: 90rpx;
}

.choose-data-title .gregorian-type .gregorian-item {
  display: inline-block;
  width: 46rpx;
  height: 46rpx;
  line-height: 46rpx;
  font-size: 24rpx;
  color: #5d656b;
  text-align: center;
  border: 1rpx solid #d4d7da;
  border-radius: 5rpx;
  margin-left: 30rpx;
}

.choose-data-title .gregorian-type .gregorian-item:first-child {
  margin-left: 0;
}

.choose-data-title .gregorian-type .gregorian-item.gregorian-item-active {
  background: #fc5459;
  color: #fff;
  border-color: #fc5459;
}
.cancel{
    border: none;
}
.confirm {
  color: #46bd45;
}

.choose-data-main {
  height: 400rpx;
  line-height: 400rpx;
}

picker-view {
  margin: 30rpx auto;
  text-align: center;
}

.mask {
  position: absolute;
  top: 0;
  z-index: 100;
  background: #000;
  opacity: 0.3;
  width: 100%;
  height: 100%;
}

.region {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 500rpx;
}

.birth {
  color: #ccc;
}
</style>
